{extend name='index/index'/}
{block name="main"}
    <!-- Start content -->
    <div class="content">
        <div class="container">

            <!-- Page-Title -->
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="pull-left page-title">{$title}</h4>
                    <ol class="breadcrumb pull-right">
                        <li>{$title}</li>
                        <li class="active">{$name}</li>
                    </ol>
                </div>
            </div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">{$name}</h3>
    </div>
    <div class="panel-body">

        <a class="btn btn-success btn-icon btn-sm" href="{:url('menu/add',array('id'=>0))}" rel="add" >
            <i class="md  md-add"></i>
            <span>添加系统菜单</span>
        </a>


        <div class="row">

            <div class="col-md-12 col-sm-12 col-xs-12">

                <table class="table  table-striped" id="menuTable">
                </table>


            </div>
        </div>
    </div>
</div>
            </div>
        </div>


<link href="__JS__/jqTreeGrid/jquery.treegrid.css" rel="stylesheet" type="text/css">
<script src="__JS__/jqTreeGrid/jquery.treegrid.js"></script>
<script src="__JS__/jqTreeGrid/jquery.treegrid.extension.js"></script>
<script>
    load();
    function load() {
        $('#menuTable')
                .bootstrapTreeTable(
                        {
                            id: 'menu_id',
                            code: 'menu_id',
                            parentCode: 'parent_id',
                            type: "GET", // 请求数据的ajax类型
                            url: "{:url('menu/menulist')}", // 请求数据的ajax的url
                            ajaxParams: {sort:'orderby'}, // 请求数据的ajax的data属性
                            expandColumn: '1',// 在哪一列上面显示展开按钮
                            striped: false, // 是否各行渐变色
                            bordered: true, // 是否显示边框
                            expandAll: false, // 是否全部展开
                            // toolbar : '#exampleToolbar',
                            columns: [
                                {
                                    title: '编号',
                                    field: 'menu_id',
                                    visible: false,
                                    align: 'center',
                                    valign: 'center',
                                    width: '5%'
                                },
                                {
                                    title: '名称',
                                    valign: 'center',
                                    field: 'menu_name',
                                    width: '20%'
                                },

                                {
                                    title: '图标',
                                    field: 'menu_icon',
                                    align: 'center',
                                    valign: 'center',
                                    width : '5%',
                                    formatter: function (item, index) {
                                        return item.menu_icon == null ? ''
                                                : '<i class="' + item.menu_icon+'"></i>';
                                    }
                                },
                                {
                                    title: '类型',
                                    field: 'type',
                                    align: 'center',
                                    valign: 'center',
                                    width : '10%',
                                    formatter: function (item, index) {
                                        if (item.type === 0) {
                                            return '<span class="label label-info">目录</span>';
                                        }
                                        if (item.type === 1) {
                                            return '<span class="label label-success">菜单</span>';
                                        }
                                        if (item.type === 2) {
                                            return '<span class="label label-warning">按钮</span>';
                                        }
                                    }
                                },
                                {
                                    title: '权限标识',
                                    valign: 'center',
                                    width : '20%',
                                    field: 'menu_role',

                                },
                                {
                                    title: '排序',
                                    valign: 'center',
                                    width : '20%',
                                    field: 'orderby'

                                },
                                {
                                    title: '操作',
                                    field: 'id',
                                    align: 'center',
                                    valign: 'center',
                                    formatter: function (item, index) {
                                        var pid = item.menu_id;
                                        var addother = "{:url('menu/add',array('id'=>'p_id'))}";
                                        var editother = "{:url('menu/edit',array('id'=>'p_id'))}";
                                        var delother = "{:url('menu/del',array('id'=>'p_id'))}";
                                        var add =  addother.replace("p_id",pid);
                                        var edit =  editother.replace("p_id",pid);
                                        var del=delother.replace("p_id",pid);
                                        var e="<a class='btn btn-pink waves-effect waves-light  btn-sm' rel='add' href='"+edit+"'><i class='fa fa-paint-brush'></i> 修改</a>&nbsp;";

                                        var p='<a class="btn btn-success  waves-effect waves-light  btn-sm" rel="add" href="'+add+'"><i class="fa fa-plus"></i>添加下级</a>&nbsp;';
                                        var d="<a class='btn btn-inverse  waves-effect waves-light  btn-sm' rel='del' href='"+del+"'><i class='fa fa-remove'></i>删除</a>&nbsp;";

                                        return e + d + p;
                                    }
                                }]
                        });
    }

    function reLoad() {
        load();
    }

</script>
{/block}